<template>
  <div class="container">
    <div class="search-view">
      <div class="search-container">
        <div class="search-logo">
          <img src="@/assets/images/logo_index.png" alt="报告" />
        </div>
        <el-input
          class="report-search"
          placeholder="搜索关键词、行业、公司、股票（多关键词可空格分开）"
          @keyup.enter.native="toSearch()"
          v-model="searchKey"
        >
          <div slot="append" @click="toSearch()" style="cursor: pointer">
            <i class="el-icon-search"></i> 查一查
          </div>
        </el-input>
        <div v-if="listTotal" class="hot-search">
          共发现{{ listTotal }}张图表
        </div>
      </div>
    </div>

    <div class="options" v-if="typeList.length">
      <div class="option">
        <div class="option-title">数据分类</div>
        <div class="option-item">
          <div
            class="option-item-name"
            :class="item.id == chartType.id ? 'option-item-name-select' : ''"
            v-for="item in typeList"
            @click="clickType(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="option">
        <div class="option-title">行业分类</div>
        <div class="option-item">
          <div
            class="option-item-name"
            :class="item.id == industry.id ? 'option-item-name-select' : ''"
            v-for="item in industryList"
            @click="clickIndustry(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="option align-items-center">
        <div class="option-title">时间筛选</div>
        <div class="option-item align-items-center">
          <div
            class="option-item-name"
            :class="item == dayRange ? 'option-item-name-select' : ''"
            style="margin-bottom: 0px"
            v-for="item in dayList"
            @click="clickRange(item)"
          >
            {{ item }}
          </div>
          <el-date-picker
            v-model="daterange"
            type="daterange"
            value-format="timestamp"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            @change="changeDate"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="option align-items-center" v-show="showClear">
        <div class="option-title">筛选条件</div>
        <div class="methods">
          <el-button
            @click="clearType"
            type="primary"
            size="mini"
            v-if="chartType"
            class="method"
            >{{ chartType.name }}<i class="el-icon-delete el-icon--right"></i
          ></el-button>
          <el-button
            @click="clearIndustry"
            type="primary"
            size="mini"
            v-if="industry"
            class="method"
            >{{ industry.name }}<i class="el-icon-delete el-icon--right"></i
          ></el-button>
          <el-button
            @click="clearRange"
            type="primary"
            size="mini"
            v-if="dayRange"
            class="method"
            >{{ dayRange }}<i class="el-icon-delete el-icon--right"></i
          ></el-button>
          <div @click="clearOption" style="margin-left: 10px">清空筛选</div>
        </div>
      </div>
    </div>

    <div class="loading" v-show="loading">
      <el-table
        type="primary"
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        empty-text=" "
      ></el-table>
    </div>
    <div class="charts">
      <div
        class="chart"
        v-for="(item, index) in charts"
        :key="item.id"
        @mouseenter="mouseEnter(index)"
        @mouseleave="mouseLeave(index)"
        :style="index == activeIndex ? activeItemStyle : ''"
      >
        <div class="chart-name">{{ item.name }}</div>
        <el-image
          class="chart-img"
          :src="item.online_url"
          :alt="item.name"
          @click.stop="clickChart(index)"
          fit="contain"
        ></el-image>
        <div class="chart-tag">
          <div>
            {{ item.type.name }} | {{ item.industry.name }} | {{ item.fid }}
          </div>
          <div>{{ item.time_text }}</div>
        </div>
        <div class="chart-sep"></div>
        <div class="chart-source">
          <div class="chart-file">来源：{{ item.file.name }}</div>
          <a
            class="chart-original"
            :href="'/detail/' + item.fid"
            target="_blank"
            >原文定位</a
          >
        </div>
      </div>
      <div class="page-view">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :page-size.sync="currentPageSize"
          :current-page.sync="currentPage"
          :total="listTotal"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </div>
    <chartinfo
      v-model="showChart"
      :chartList="charts"
      :chartIndex="chartIndex"
    ></chartinfo>
  </div>
</template>

<script>
import { searchChart, getChartTypeList, getIndustryList } from "@/api/chart.js";
import { mapGetters } from "vuex";
import payform from "../components/payform.vue";
import chartinfo from "../components/chartInfo.vue";

export default {
  data() {
    return {
      charts: [],
      typeList: [],
      industryList: [],
      dayList: ["近3天", "近7天", "近30天"],
      activeItemStyle: "",
      activeIndex: "",
      searchKey: "",
      chartType: "",
      industry: "",
      dayRange: "",
      daterange: "",
      currentPageSize: 20,
      currentPage: 1,
      listTotal: 0,
      loading: false,
      showChart: false,
      chartIndex: 0,
    };
  },
  components: {
    payform,
    chartinfo,
  },
  computed: {
    ...mapGetters(["sid", "is_vip"]),
    showClear: function () {
      return this.chartType != "" || this.industry != "" || this.dayRange != "";
    },
  },
  created() {
    if (process.client) {
      this.getCharts();
      this.getTagInfo();
    }
  },
  methods: {
    // 查看图标详情
    clickChart(index) {
      this.chartIndex = index;
      this.showChart = true;
    },
    // 获取标签数据：数据分类，行业分类
    getTagInfo() {
      getChartTypeList()
        .then((res) => {
          this.typeList = res.data.data;
        })
        .catch((err) => {});
      getIndustryList()
        .then((res) => {
          this.industryList = res.data.data;
        })
        .catch((err) => {});
    },
    // 获取图表数据
    getCharts() {
      this.charts = [];
      // this.listTotal = 0;
      this.loading = true;
      let keyword = this.searchKey;

      // "近3天", "近7天", "近30天"
      var datetype = 0;
      if (this.dayRange == "近3天") {
        datetype = 1;
      } else if (this.dayRange == "近7天") {
        datetype = 2;
      } else if (this.dayRange == "近30天") {
        datetype = 3;
      }

      let range = this.daterange;
      var startTime = "";
      var endTime = "";
      if (range) {
        startTime = range[0] / 1000;
        endTime = range[1] / 1000;
        this.dayRange = "";
      }

      let params = {
        keyword: keyword,
        page: this.currentPage,
        pageSize: this.currentPageSize,
        typeId: this.chartType.id,
        industryId: this.industry.id,
        dateRange: datetype,
        startTime: startTime,
        endTime: endTime,
      };
      searchChart(params)
        .then((res) => {
          console.log(res);
          this.loading = false;
          this.charts = res.data.charts;
          this.listTotal = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    pageChange(page) {
      this.currentPage = page;
      this.getCharts();
    },
    // 点击数据类型
    clickType(item) {
      this.chartType = item;
      this.getCharts();
    },
    // 点击行业类型
    clickIndustry(item) {
      this.industry = item;
      this.getCharts();
    },
    // 选择时间范围
    clickRange(range) {
      this.dayRange = range;
      this.getCharts();
    },
    // 选择自定义时间
    changeDate() {
      this.getCharts();
    },
    // 清空筛选条件
    clearOption() {
      this.industry = "";
      this.chartType = "";
      this.dayRange = "";
      this.getCharts();
    },
    // 清除类型
    clearType() {
      this.chartType = "";
      this.getCharts();
    },
    // 清除行业
    clearIndustry() {
      this.industry = "";
      this.getCharts();
    },
    clearRange() {
      this.dayRange = "";
      this.getCharts();
    },
    // 点击搜索
    toSearch() {
      this.getCharts();
    },
    mouseEnter(index) {
      this.activeIndex = index;
      this.activeItemStyle = "border: 1px solid #9d66dc;background: #efebf5;";
    },
    mouseLeave(index) {
      this.activeIndex = "";
      this.activeItemStyle = "";
    },
  },
};
</script>


<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-view {
  width: 100%;
  height: 70px;
  background: #467dd0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0 20px;
  box-sizing: border-box;
}

.search-container {
  max-width: 1250px;
  width: 100%;
  height: 100%;
  display: flex;
  // background: red;
  align-items: center;
}

.search-logo {
  width: 200px;
  margin-right: 180px;
  img {
    width: 100%;
  }
}

.report-search {
  width: 500px;
  background-color: white;
  border-radius: 30px;
  font-size: 14px;
}

/deep/ .el-input-group__append {
  background: #467dd0;
  color: #fff;
  width: 96px;
}

.hot-search {
  font-size: 14px;
  color: white;
  margin-left: 40px;
}

// options
.options {
  width: 100%;
  max-width: 1250px;
  display: flex;
  flex-direction: column;
  background: white;
  box-sizing: border-box;
  padding: 15px 40px;
  margin-bottom: 10px !important;
  position: relative;
}

.option {
  color: #999999;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 12px 0px 0px;
  display: flex;
}

.option-title {
  width: 100px;
}

.option-item {
  width: calc(100% - 160px);
  cursor: pointer;
  color: #333;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.option-item-name {
  margin-bottom: 16px;
  margin-right: 28px;
}

.option-item-name-select {
  color: #467dd0;
}

.option-item-name:hover {
  color: #467dd0;
  font-weight: bold;
}

.methods {
  display: flex;
  align-items: center;
  color: #467dd0;
  font-weight: bold;
}

.method {
  cursor: pointer;
  margin-right: 8px;
  background-color: #e4ecff;
  border: 1px solid #2e54ad;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
}

// charts
.charts {
  width: 100%;
  max-width: 1270px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 0 40px;
}

.chart {
  cursor: default;
  max-width: calc(25% - 16px);
  width: 300px;
  padding-bottom: 20px;
  padding: 16px;
  margin: 8px;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  box-sizing: border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 10px 0 rgba(39, 66, 107, 0.1);
}
.chart-name {
  width: 100%;
  text-align: center;
  height: 36px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: center;
}
.chart-img {
  margin-top: 20px;
  width: 100%;
  height: 150px;
}

.chart-tag {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  height: 34px;
  color: #aaa;
  font-size: 13px;
}

.chart-sep {
  width: 100%;
  height: 1px;
  background-color: #e9e9e9;
}

.chart-source {
  color: #333;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  max-height: 32px;
}
.chart-file {
  width: 70%;
  font-size: 11px;
  line-height: 16px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.chart-original {
  font-size: 12px;
  width: 72px;
  height: 24px;
  line-height: 24px;
  color: rgb(255, 255, 255);
  text-align: center;
  border-radius: 5px;
  font-family: "微软雅黑", "Arial";
  background: rgb(110, 116, 200);
  text-decoration: none;
}
.page-view {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}

.loading {
  width: 100%;
  background: transparent;
  border: none;
  max-width: 1250px;
}
</style>
